<template>
  <div class="content flex justify-between flex-items-center">
    <div class="box startTime" @click="chooseTime('start')">
      <!-- <van-icon name="calendar-o" /> -->
      <van-field
        v-model="startTime"
        left-icon="calendar-o"
        placeholder="请选择时间"
        readonly
      />
    </div>
    <span>至</span>
    <div class="box endTime" @click="chooseTime('end')">
      <van-field
        v-model="endTime"
        left-icon="calendar-o"
        placeholder="请选择时间"
        readonly
      />
    </div>

    <!-- <van-calendar
      v-model="show"
      @confirm="onConfirm"
      :min-date="minDate"
      :max-date="maxDate"
      color="#45B56E"
    /> -->
    <van-action-sheet v-model="show">
      <van-datetime-picker
        type="date"
        title="选择年月日"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="onConfirm"
      />
    </van-action-sheet>
  </div>
</template>

<script>
import dayjs from "dayjs";
import { getCalendarMinDate } from "@/api/api";
export default {
  data() {
    return {
      startTime: "",
      endTime: "",
      type: "",
      show: false,
      minDate: new Date(dayjs("2024-09-01").valueOf()),
      maxDate: new Date(dayjs("2024-09-10").valueOf()),
      // 可选最早时间字符串格式
      minDateStr: "",
    };
  },
  computed: {
    // 开始时间在结束时间之前
    startTimeBeforeEndTime() {
      if (this.startTime && this.endTime) {
        return dayjs(this.startTime).isBefore(dayjs(this.endTime));
      } else {
        return true;
      }
    },
  },
  created() {
    this.getCalendarMinDate();
  },
  methods: {
    onConfirm(date) {
      console.log(date);
      
      this.show = false;
      this.type == "start"
        ? (this.startTime = dayjs(date).format("YYYY-MM-DD"))
        : (this.endTime = dayjs(date).format("YYYY-MM-DD"));
      //判断结束时间必须大于开始时间
      if (this.startTimeBeforeEndTime) {
        //  return
        if (this.startTime && this.endTime) {
          this.$emit("confirm", {
            result: true,
            startTime: this.startTime,
            endTime: this.endTime,
          });
        }
      } else {
        this.$emit("confirm", {
          result: false,
          msg: "开始时间必须小于结束时间",
        });
        // alert('开始时间必须小于结束时间')
      }
    },
    chooseTime(type) {
      this.show = true;
      this.type = type;
    },
    // 重置
    reset() {
      this.startTime = dayjs(this.minDateStr).format("YYYY-MM-DD");
      this.endTime = dayjs().format("YYYY-MM-DD");
      this.$emit("confirm", {
        result: true,
        startTime: this.startTime,
        endTime: this.endTime,
      });
    },
    // 获取可选最早的日期范围
    async getCalendarMinDate() {
      let { data } = await getCalendarMinDate();
      this.minDateStr = data;
      this.minDate = new Date(dayjs(data).valueOf());
      this.maxDate = new Date(dayjs().valueOf());
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  height: 100%;

  .box {
    width: 300px;
    height: 64px;
    box-shadow: 0px 0px 16px 1px rgba(0, 0, 0, 0.1);
    border-radius: 99px 99px 99px 99px;
    border: 1px solid rgba(0, 0, 0, 0);
    overflow: hidden;
  }

  span {
    font-size: 28px;
    color: #333333;
  }

  ::v-deep .van-cell {
    width: 100%;
    height: 100%;
    padding: 0 30px;

    // background: #F5F5F5;
    // border-radius: 35px 35px 35px 35px;
    .van-field__left-icon {
      display: flex;
      align-items: center;

      .van-icon {
        font-size: 28px;
        color: rgba(70, 190, 120, 1);
      }
    }

    .van-cell__value {
      height: 100%;

      .van-field__body {
        height: 100%;
      }
    }

    input {
      height: 100%;
      display: flex;
      align-items: center;
      font-weight: 400;
      font-size: 28px;
      margin-left: 20px;
    }

    input::placeholder {
      font-weight: 400;
      font-size: 28px;
      color: #999999;
      vertical-align: middle;
    }
  }
}
</style>
